import React from 'react'
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom'
import HomeHead from '../../components/HomeHead';
import A from '../router-dom/A';
import B from '../router-dom/B';
import C from '../router-dom/C';
import A1 from '../router-dom/a/A1'
import A2 from '../router-dom/a/A2'
import A3 from '../router-dom/a/A3'

export default function App() {
    return (
        <HashRouter>
            <h1>App</h1>
            <HomeHead />

            <div className="content">
                <Routes>
                    <Route path="/" element={<Navigate to="/a" />} />
                    <Route path="/a" element={<A />} >
                        {/* v6版本中，要求所有的路由(二级或者多级路由)，不在分散到各个组件中编写，而是统一都写在一起进行处理！！ */}
                        <Route path="/a" element={<Navigate to="/a/a1" />} />
                        <Route path="/a/a1" element={<A1 />} />
                        <Route path="/a/a2" element={<A2 />} />
                        <Route path="/a/a3" element={<A3 />} />
                    </Route>
                    <Route path="/b" element={<B />} />
                    <Route path="/c/:id?/:name?" element={<C />} />

                    {/* 如果以上都不匹配，我们可以渲染404组件，也可以重定向到A组件「传递不同的问号参数信息」 */}
                    <Route path="*" element={<Navigate to={{
                        pathname: '/a',
                        search: '?from=404'
                    }} />} />
                </Routes>
            </div>
        </HashRouter>

    )
}
